<script setup lang="ts">
// 导入Vue的onMounted钩子函数
import { onMounted, inject } from 'vue';
import TestDefault from './default.vue';

const props: any = defineProps<{
    ujt: any;
}>();

const { $fn } = props.ujt;
// 用于kududu处理组件的初始化逻辑
const { initAppModel } = $fn.useInitApp(props.ujt);
initAppModel('kududu');


// 导航菜单切换
function toggleMenu() {
    document.querySelector('.kdd-nav-menu').classList.toggle('active');
}
onMounted(() => {
    // 关闭菜单（点击外部区域）
    document.addEventListener('click', function (e) {
        const navMenu = document.querySelector('.kdd-nav-menu');
        const menuToggle = document.querySelector('.kdd-menu-toggle');

        if (!navMenu?.contains(e.target) && !menuToggle?.contains(e.target)) {
            navMenu?.classList?.remove('active');
        }
    });

    // 滚动导航栏效果
    window.addEventListener('scroll', () => {
        const navBar = document.querySelector('.kdd-nav-bar');
        if (window.scrollY > 50) {
            navBar.style.background = 'rgba(10, 10, 46, 0.98)';
            navBar.style.boxShadow = '0 5px 20px rgba(0, 247, 255, 0.3)';
        } else {
            navBar.style.background = 'rgba(10, 10, 46, 0.95)';
            navBar.style.boxShadow = 'none';
        }
    });

    // 移动端触摸滑动关闭菜单
    let touchStartX = 0;
    document.addEventListener('touchstart', (e) => {
        touchStartX = e.changedTouches[0].screenX;
    });

    document.addEventListener('touchend', (e) => {
        const touchEndX = e.changedTouches[0].screenX;
        if (Math.abs(touchEndX - touchStartX) > 50) {
            document.querySelector('.kdd-nav-menu').classList.remove('active');
        }
    });
});
</script>

<template>
    <TestDefault :ujt="ujt"></TestDefault>

    <nav class="kdd-nav-bar">
        <div class="kdd-nav-container">
            <div class="kdd-logo">KUDUDU.COM机器人</div>
            <button class="kdd-menu-toggle" @pointerdown="toggleMenu()">☰</button>
            <div class="kdd-nav-menu">
                <a href="#news">行业资讯</a>
                <a href="#suppliers">供应商</a>
                <a href="#products">产品库</a>
                <a href="#jobs">人才招聘</a>
            </div>
        </div>
    </nav>
    <div class="kdd-main-area">
        <RouterView :ujt="ujt" :ty="1"></RouterView>

        <footer class="kdd-footer">
            <p>
                © 2025 KUDUDU.COM机器人
                <a href="http://asai.cc" class="social-link">asai.cc人工智能</a>
                <a href="http://kududu.com" class="social-link">
                    kududu.com机器人
                </a>
            </p>
        </footer>
    </div>
</template>

<style scoped lang="scss">
.kdd-main-area {
    height: 100%;
    overflow: auto;
}
</style>
